<template>
  <div>
    <div class="feed_div">
      <!-- 表单区域 -->
      <div class="feed_div_main">
        <el-table
          class="feed_div_table"
          height="65vh"
          :data="this.$store.state.feedbackTableData"
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" width="50" align="center">
          </el-table-column>
          <el-table-column
            prop="nickname"
            label="用户名"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column label="联系方式" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.phone">{{ scope.row.phone }}</span>
              <span v-if="scope.row.email">{{ scope.row.email }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            width="160"
            label="反馈日期"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="title" label="反馈文章" align="center">
          </el-table-column>
          <el-table-column prop="content" label="反馈内容" align="center">
          </el-table-column>
          <el-table-column label="处理状态" width="80" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.handleStatus == 2" type="success"
                >已处理</el-tag
              >
              <el-tag v-if="scope.row.handleStatus == 1" type="warning"
                >处理中</el-tag
              >
              <el-tag v-if="scope.row.handleStatus == 0" type="danger"
                >未处理</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="通知状态" width="80" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.ficationStatus == 1" type="success"
                >已通知</el-tag
              >
              <el-tag v-if="scope.row.ficationStatus == 0" type="danger"
                >未通知</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="140"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="feedbackFormTableUpdate(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="feedbackFormTableDelete(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页区域 -->
      <div class="feed_div_footer">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.$store.state.feedbackTotal"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 弹窗 -->
      <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
        append-to-body
      >
        <el-form :model="feedbackFormTable" label-width="80px">
          <el-form-item label="处理状态:">
            <el-select v-model="feedbackFormTable.handleStatus">
              <el-option label="未处理" :value="0"></el-option>
              <el-option label="处理中" :value="1"></el-option>
              <el-option label="已处理" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="通知状态:">
            <el-select type="number" v-model="feedbackFormTable.ficationStatus">
              <el-option label="未通知" :value="0"></el-option>
              <el-option label="已通知" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateUserError">取 消</el-button>
          <el-button type="primary" @click="feedbackFormStatusUpdate"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<style>
@import url(../../css/feedbackView.css);
</style>
<script src="../../js/feedbackView"></script>
